<template>
  <ul :class="`${prefixCls}-menu`">
    <li
      :class="classes(item)"
      v-for="item in options"
      :key="item.value"
      @click="itemClick(item, $event)"
      @mouseenter="itemHover(item, $event)"
    >
      <Checkbox
        :indeterminate="checkStrictly && item.indeterminate"
        :modelValue="Boolean(item.checked)"
        label=""
      >
        <!-- {{ item.indeterminate }}--{{ checkStrictly }} -->
      </Checkbox
      ><span>{{ item.label }}</span>
      <Icon :type="arrowType" v-if="showArrow(item)" />
    </li>
  </ul>
</template>
<script>
import {
  defineComponent
} from "vue"
import Icon from '../icon/icon.vue'
import Checkbox from '../checkbox/index'

const prefixCls = 'haloe-cascader'

// export default defineComponent({
export default {
  name: 'CasOption',
  components: {
    Checkbox,
    Icon,
  },
  emits: ["on-item-trigger", "on-change", "on-select"],
  props: {
    displayValues: {
      type: Array,
      default: () => [],
    },
    options: {
      type: Array,
      default: () => [],
    },
    index: {
      type: Number,
      default: null,
    },
    checkStrictly: {
      type: Boolean,
      default: true,
    },
    trigger: String,
  },
  computed: {
    classes() {
      return (item) => {
        const isLeaf = (node) => {
          return !node.children || node.children.length === 0
        }
        // 逻辑参考element
        // checked: 勾选 expand：展开 selected：点击时选中
        // 展开的目录，以及勾选的叶子节点文字高亮
        // 点选的节点，背景高亮
        return [
          `${this.prefixCls}-menu-item`,
          {
            [`${this.prefixCls}-menu-item-checked`]:
              isLeaf(item) && item.checked,
            [`${this.prefixCls}-menu-item-expand`]: !isLeaf(item) && this.displayValues.includes(item.value),
            [`${this.prefixCls}-menu-item-selected`]: item.selected,
          },
          /* {
            'ivu-cascader-menu-item-checked': isLeaf(item) && item.checked,
            'ivu-cascader-menu-item-expand':
              !isLeaf(item) && this.displayValues.includes(item.value),
            'ivu-cascader-menu-item-selected': item.selected,
          }, */
        ]
      }
    },
    showArrow() {
      return (item) => item.children && item.children.length
    },
    arrowType() {
      const config = this.globalConfig
      let type = 'arrow'

      if (config) {
        if (config.cascader.customItemArrow) {
          type = ''
        } else if (config.cascader.itemArrow) {
          type = config.cascader.itemArrow
        }
      }
      return type
    },
  },
  data: () => {
    return {
      prefixCls,
    }
  },
  methods: {
    itemTrigger(value) {
      this.$emit('on-item-trigger', {
        value: value,
        index: this.index,
      })
    },
    itemHover(item, event) {
      if (this.trigger === 'hover') {
        this.itemTrigger(item.value)
      }
    },
    itemClick(item, event) {
      if (event.target.type === 'checkbox') {
        this.$emit('on-change', item)
      }
      // 点选option
      this.$emit('on-select', item)
      this.options.forEach((opt) => (opt.active = opt.value === item.value))
      this.itemTrigger(item.value)
    },
  },
}
</script>
